<template>
  <div class="home">
    <!-- 顶部“精选”“我的”区域，这里先简单放置，可按需调整样式和逻辑 -->
    <div class="header">
      <span>精选</span>
      <span>我的</span>
    </div>
    <!-- 功能模块区域 -->
    <div class="function-area">
      <!-- 第一行功能模块 -->
      <div class="function-row">
        <div class="function-item">
          <i class="icon cet-icon"></i>
          <p>四六级课</p>
        </div>
        <div class="function-item">
          <i class="icon exam-icon"></i>
          <p>大学考试</p>
        </div>
        <div class="function-item">
          <i class="icon abroad-icon"></i>
          <p>出国英语</p>
        </div>
        <div class="function-item">
          <i class="icon practical-icon"></i>
          <p>实用英语</p>
        </div>
        <div class="function-item">
          <i class="icon lsrw-icon"></i>
          <p>听说读写</p>
        </div>
      </div>
      <!-- 第二行功能模块 -->
      <div class="function-row">
        <div class="function-item">
          <i class="icon high-school-icon"></i>
          <p>高中英语</p>
        </div>
        <div class="function-item">
          <i class="icon grammar-icon"></i>
          <p>语法基础</p>
        </div>
        <div class="function-item">
          <i class="icon junior-icon"></i>
          <p>初中英语</p>
        </div>
        <div class="function-item">
          <i class="icon speaking-icon"></i>
          <p>口语课</p>
        </div>
        <div class="function-item">
          <i class="icon lecture-icon"></i>
          <p>小讲堂</p>
        </div>
      </div>
    </div>
    <div class="header">
      <span>英语专向突破</span>  
    </div> 
    <!--中间三个图片部分-->
    <div class="english-courses-container">
    <div class="course-item" v-for="(course, index) in courses" :key="index">
      <div class="course-img">
        <img :src="course.image" alt="course" />
      </div>
      <div class="course-info">
        <p class="course-title">{{ course.title }}</p>
        <p class="course-price">¥{{ course.price }}</p>
      </div>
    </div>
    </div>
    <!--第三部分-->
    <div class="header">
      <span>专题学习</span>  
    </div> 
    <div class="practical-english">
    <!-- 顶部区域 -->
    <div class="top-section">
      <img 
        src="@/assets/book-cover.jpg" 
        alt="book cover" 
        class="book-cover"
      >
      <div class="title-wrap">
        <h2 class="main-title">实用英语     ></h2>
        <div class="user-info">
          <img 
            v-for="(avatar, index) in avatars" 
            :key="index" 
            :src="avatar" 
            alt="user avatar" 
            class="avatar"
          >
          <span class="student-count">2w人在学</span>
        </div>
      </div>
    </div>
    <!-- 课程列表区域 -->
    <div class="course-list">
      <div 
        v-for="(course, index) in courses" 
        :key="index" 
        class="course-item"
      >
        <img :src="course.cover" alt="course cover" class="course-cover">
        <div class="course-info">
          <h3 class="course-title">{{ course.title }}</h3>
          <p class="course-desc">{{ course.desc }}</p>
        </div>
      </div>
    </div>
  </div>
    <!-- 其他内容区域，这里先保留原有的 -->
    我是我的页面
    <tabbar :ishow="1"></tabbar>
  </div>
</template>
<script>
import tabbar from '@/components/tabbar.vue';
import { ref } from 'vue';
export default {
data(){
  return {
      courses: [
        {
          image: require('../assets/special-listen.png'), // 替换为实际图片路径，这里假设图片在 assets 目录下
          title: '听力4天体验营',
          price: 6
        },
        {
          image: require('../assets/special-listen.png'),
          title: '外刊精读训练营',
          price: 6
        },
        {
          image: require('../assets/special-listen.png'),
          title: '番茄口语',
          price: 6
        }
      ]
    };
},
  components: {
    tabbar
  },
  methods: {
    // 这里可以添加功能模块点击后的方法，目前先空着
    handleFunctionItemClick() {}
  }
}
const features = [
  { icon: require('../assets/icon-cet.png'), text: '大学考试' },
  { icon: require('../assets/icon-lecture.png'), text: '四六级课' },
  { icon: require('../assets/icon-plane.png'), text: '出国英语' },
  { icon: require('../assets/icon-coffee.png'), text: '实用英语' },
  { icon: require('../assets/icon-lswr.png'), text: '听说读写' },
  { icon: require('../assets/icon-gao.png'), text: '高中英语' },
  { icon: require('../assets/icon-new.png'), text: '语法基础' },
  { icon: require('../assets/icon-gao.png'), text: '初中英语' },
  { icon: require('../assets/icon-calendar.png'), text: '口语课' },
  { icon: require('../assets/icon-chart.png'), text: '小讲堂' }
]
const specials = [
  {
    img: require('../assets/special-listen.png'),
    label: '听力·趣味磨耳',
    labelBg: 'linear-gradient(90deg, #ffb84d 0%, #ffe7b2 100%)',
    title: '听力4天体验营',
    price: 6
  },
  {
    img: require('../assets/special-read.png'),
    label: '阅读·外刊精读',
    labelBg: 'linear-gradient(90deg, #4dd0ff 0%, #b2f0ff 100%)',
    title: '外刊精读训练营',
    price: 6
  },
  {
    img: require('../assets/special-listen.png'),
    label: '口语·外教实战',
    labelBg: 'linear-gradient(90deg, #ff4d6d 0%, #ffb2c3 100%)',
    title: '番茄口语',
    price: 6
  }
]// 当前激活的标签页
// 模拟头像数据，实际可从接口获取
const avatars = ref([
  require('../assets/avatar4.png'),
  require('../assets/avatar4.png'),
  require('../assets/avatar4.png'),
  require('../assets/avatar4.png')
]);
// 模拟课程数据，实际可从接口获取
const courses = ref([
  {
    image: require('../assets/course3.png'),
    title: '外刊精读',
    desc: '看世界+提高阅读词汇量'
  },
  {
    image: require('../assets/course3.png'),
    title: '听力体验营',
    desc: '无字幕看电影'
  },
  {
    image: require('../assets/course3.png'),
    title: '番茄英语',
    desc: '旅行+学口语'
  }
]);
</script>
<style>
template{
   /* background-color: #ccc;*/
}
.header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
}
.header span {
  margin-right: 10px;
  font-size: 24px;
  font-weight: bold;
}
/*设置功能格位置*/
.function-area {
    width: 90%;
  margin: 20px auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.function-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}
.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.icon {
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
}
.cet-icon {
  background: url('../assets/icon-abc.png') no-repeat center; /* 需替换为真实图标路径 */
  background-size: contain;
}
.exam-icon {
  background: url('../assets/icon-cet.png') no-repeat center;
  background-size: contain;
}
.abroad-icon{
  background: url('../assets/icon-calendar.png') no-repeat center;
  background-size: contain;
}
.practical-icon{
  background: url('../assets/icon-chart.png') no-repeat center;
  background-size: contain;
}
.lsrw-icon{
   background: url('../assets/icon-lswr.png') no-repeat center;
  background-size: contain;
}
/*第二行*/
.high-school-icon{
  background: url('../assets/icon-new.png') no-repeat center;
  background-size: contain;
}
.grammar-icon{
   background: url('../assets/icon-lecture.png') no-repeat center;
  background-size: contain;
}
.junior-icon{
  background: url('../assets/icon-new.png') no-repeat center;
  background-size: contain;
}
.speaking-icon{
  background: url('../assets/icon-gao.png') no-repeat center;
  background-size: contain;
}
.lecture-icon{
   background: url('../assets/icon-coffee.png') no-repeat center;
  background-size: contain;
}
/* 依次类推，为其他图标设置背景路径和样式 */
.function-item p {
  text-align: center;
  font-size: 14px;
  color: #666;
}
/*三个图片部分*/
.english-courses-container{
  width: 90%;
  margin: 20px auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.english-courses-container {
  display: flex;

  /*justify-content: space-around;*/
  /*flex-wrap: wrap;*/
}
.course-item {
  width: 35%;
  text-align: center;
  border: none;
  border-radius: 5px;
  padding: 10px;
}
.course-img img {
  width: 70%;
  height: auto;
}
.course-info {
  margin-top: 10px;
}
.course-title {
  font-size: 16px;
  margin-bottom: 5px;
}
.course-price {
  color: #f40;
  font-weight: bold;
}
cursor-item{
  display: inline-block;
}
/*专题学习*/
.practical-english {
  width: 90%;
  margin: 20px auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.top-section{
  display: flex;
  align-items: center;
  padding: 15px;
   
  background-image: linear-gradient(to bottom, #d1cbcb, #a6a4a4); 

}
.book-cover {
  width: 80px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 15px;
}
.title-wrap {
  display: flex;
  flex-direction: column;
}
.main-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 8px 0;
}
.user-info {
  display: flex;
  align-items: center;
}
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}
.student-count {
  font-size: 14px;
  color: #666;
}
.course-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  padding: 15px;
}
.course-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.course-item:hover {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.08);
}
.course-cover {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 10px;
}
.course-info {
  display: flex;
  flex-direction: column;
}
.course-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 4px 0;
}
.course-desc {
  font-size: 14px;
  color: #666;
  margin: 0;
}
</style>